<template>
  <div class="valendar">
    <el-select
      v-model="currentMonth"
      placeholder="请选择月份"
      style="float:right"
      @change="currentMonthChange"
    >
      <el-option
        v-for="item in 12"
        :key="item"
        :label="`${item} 月`"
        :value="item"
      >{{ item }}月</el-option>
    </el-select>
    <el-select
      v-model="currentYear"
      placeholder="请选择年份"
      style="float:right"
      @change="currentYearChange"
    >
      <el-option
        v-for="item in years"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-calendar v-model="currentData">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <!-- <template slot="dateCell" slot-scope="{ date, data }"> -->
      <template #dateCell="{ date, data }">
        <p
          style="width:60px;text-align:right;line-height:35px;"
          :class="data.isSelected ? 'is-selected' : ''"
          @click="logDate(date, data)"
        >
          {{
            data.day.split('-')[2][0] === '0'
              ? `${data.day.split('-')[2][1]}`
              : `${data.day.split('-')[2]}`
          }}
          <!-- {{ data.isSelected ? "✔️" : "" }} -->
          <!-- {{ date.getDay() === 6 || date.getDay() === 0 ? '休' : ' ' }} -->
          <span
            v-if="date.getDay() === 6 || date.getDay() === 0"
            style="padding:5px;background-color:#ff6900;border-radius:20px;color:#FFF"
          >休</span>
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      years: [
        {
          value: 2018,
          label: '2018年'
        },
        {
          value: 2019,
          label: '2019年'
        },
        {
          value: 2020,
          label: '2020年'
        },
        {
          value: 2021,
          label: '2021年'
        }
      ],
      currentYear: '',
      currentMonth: '',
      currentData: ''
    }
  },
  created() {
    const newdate = new Date()
    this.currentYear = newdate.getFullYear()
    this.currentMonth = newdate.getMonth() + 1
  },
  methods: {
    logDate(date, data) {
      console.log(
        'data.day.split("-")[2][0]',
        data.day.split('-')[2][0] === '0'
      )
      // console.log("date:", date);
      // console.log(date.getDay());
    },
    currentYearChange() {
      this.currentData = new Date(this.currentYear, this.currentMonth, 1)
    },
    currentMonthChange() {
      this.currentData = new Date(this.currentYear, this.currentMonth, 1)
    }
  }
}
</script>
<style>
.is-selected {
  color: #1989fa;
}
.el-calendar .el-calendar__header {
  display: none;
}
.el-calendar-table__row td {
  text-align: center;
}
/* .el-backtop,
.el-calendar-table td.is-today {
  color: #fff;
} */
</style>
